<script setup>
import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import axios from "axios";
import qs from "qs";

onMounted(()=>{
  loadCarEntryAndExitLog();
})

const dialogVisible = ref(false);
const dialogVisible2 = ref(false);

const dialogTitle = ref('新增车辆进出记录');

const handleClose = ()=>{
  if(confirm('您确认要关闭本弹窗吗?')){
    dialogVisible.value = false;
  }
}

const saveCarEntryAndExitForm = ref({
  parkingId:'',
  license:'',
  entranceTime:''
})

const addCarEntryAndExit = ()=>{
  //确保每次新增时的标题,且弹窗表单中没有数据
  dialogTitle.value = '新增车辆进出记录';
  dialogVisible.value = true;
  saveCarEntryAndExitForm.value = {};
}
//定义对象用来保存搜索卡片的操作日志搜索条件
const searchCarEntryAndExit = ref({
  parkingName:'',
  license:''
});
const chargeInfo = ref({
  parkRecordId:'',
  amount:'',
  paymentMethod:'',
  orderId:''
});
const chargeInfoUPdate = ref({
  parkRecordId:'',
  amount:'',
  paymentMethod:'',
  orderId:''
});

const saveCarEntryAndExit = ()=>{
  //把收集到的表单数据转为查询字符串格式
  let data = qs.stringify(saveCarEntryAndExitForm.value);
  //给后端发请求
  axios.post(BASE_URL+'/carLog/save',data).then((response)=>{
    if(response.data.code==2000){
      ElMessage.success('保存成功!');
      saveCarEntryAndExitForm.value = {};
      dialogVisible.value = false;
      loadCarEntryAndExitLog();
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}


//定义数组用来保存所有的操作日志数据(模拟数据)
const carEntryAndExitArr = ref([]);
//重置
const resetSearch = () => {
  searchCarEntryAndExit.value = {}
  loadCarEntryAndExitLog();
}
//定义方法加载所有的操作日志数据
const loadCarEntryAndExitLog = ()=>{
  let data = qs.stringify(searchCarEntryAndExit.value);
  axios.get(BASE_URL+'/carLog/select?'+data).then((response)=>{
    if(response.data.code === 2000){
      carEntryAndExitArr.value = response.data.data;
    }else{
      ElMessage.error(response.data.msg);
    }
  })
}

const exit = (id)=>{

    axios.post(BASE_URL+'/carLog/exit/'+id).then((response)=>{
      if(response.data.code === 2000){
        console.log(response.data.data);
        chargeInfo.value = response.data.data;
        dialogVisible2.value = true;
        //删除成功后重新加载所有车辆数据
        //loadCarEntryAndExitLog();
      }else{
        ElMessage.error(response.data.msg);
      }
    })

}

var basePath="http://127.0.0.1:1688"
//商户订单号
var outTradeNo;

//定时任务
var WeChatPayTrade;
//记录是否通知页面“用户已扫码”
var WeChatPayFindNumber = true
//微信商家唯一订单编号
var WeChatPayOut_trade_no;

const pay = ()=>{
  axios.post(basePath+'/WeiXinPayController/createNative',{
    success: function (res) {
      if (res.code == 0) {
        //商户订单编号
        WeChatPayOut_trade_no = res.out_trade_no;
        //创建订单二维码
        createQrcode(res.QrCode);
      } else {
        alert(res.msg)
      }
    }
  })
}
var qRCode;
//生成付款二维码
function createQrcode(url) {
  if (qRCode != undefined && qRCode != '') {
    //清空之前的二维码
    $("#Orcode_div canvas").remove()
    $("#yes_qrcode").hide();
  }
  //生成二维码放入”Orcode_div“ div
  qRCode = $('#Orcode_div').qrcode({
    width: 168, //宽度
    height: 168, //高度
    text: url
  });
  if (url.indexOf("weixin") > -1) {
    findWeChatPay_trade();
  }
}

const updateChargeInfo = ()=>{

  let data = JSON.stringify(chargeInfo.value);
  console.log(data);
    axios.post(BASE_URL+'/order/updateOrder?', data, {
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      }
    }
    ).then((response)=>{
      if(response.data.code === 2000){
        ElMessage.success('缴费成功!');
        dialogVisible2.value = false;
        loadCarEntryAndExitLog();
      }else{
        ElMessage.error(response.data.msg);
      }
    })
  }
const paymentMethods = ref([
  { label: '微信', value: '微信' },
  { label: '支付宝', value: '支付宝' },
  { label: '车位卡', value: '车位卡' }
]);
</script>

<template>
  <!-- 顶部条 -->
  <div style="height: 6vh;background-color:#fff;padding:10px 20px;">
    <span style="line-height:60px;font-size:20px;">车辆进出记录</span>
  </div>
  <!--操作日志搜索卡片-->
  <el-card style="margin: 20px;">
    <el-form :inline="true">
      <el-form-item label="停车场名称:" style="width: 35vh;">
        <el-input placeholder="请输入停车场名称" v-model="searchCarEntryAndExit.parkingName" @keydown.enter="loadCarEntryAndExitLog"></el-input>
      </el-form-item>
      <el-form-item label="车牌号:" style="width: 35vh;">
        <el-input placeholder="请输入车牌号" v-model="searchCarEntryAndExit.license" @keydown.enter="loadCarEntryAndExitLog"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadCarEntryAndExitLog">查询</el-button>
        <el-button @click="addCarEntryAndExit" type="success">入场</el-button>
      </el-form-item>
    </el-form>
  </el-card>
  <!-- 弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             style="width:1000px;padding:40px;" :before-close="handleClose">
    <el-form label-width="80px" label-position="top">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="停车场名称">
            <el-select v-model="saveCarEntryAndExitForm.parkingId" placeholder="请选择停车场">
              <el-option label="停车场A" value="1"></el-option>
              <el-option label="停车场B" value="2"></el-option>
              <el-option label="停车场C" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input placeholder="请输入内容" v-model="saveCarEntryAndExitForm.license"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="入场时间">
            <el-date-picker type="datetime" format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss"
                            placeholder="选择日期" v-model="saveCarEntryAndExitForm.entranceTime"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveCarEntryAndExit">确定</el-button>
    </template>
  </el-dialog>
  <!-- 出场缴费弹窗 -->
  <el-dialog title="出场缴费" v-model="dialogVisible2"
             style="width:1000px;padding:40px;" :before-close="handleClose2">
    <div style="text-align:center;padding:20px;">
      <p>本次停车费用信息如下:</p>
      <p>入场时间:{{chargeInfo.entranceTime}}</p>
      <p>出场时间:{{chargeInfo.leaveTime}}</p>
      <p>停车时间:{{chargeInfo.userTime}}分钟</p>
      <p>停车费用:{{chargeInfo.amount}}元</p>
      <div style="display: flex; justify-content: center;">
  <el-form>
    <el-form-item label="支付方式">
      <el-select placeholder="请选择" v-model="chargeInfo.paymentMethod" style="width: 100px">
        <el-option
          v-for="method in paymentMethods"
          :key="method.value"
          :label="method.label"
          :value="method.value"
        ></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</div>

      <el-button type="primary" @click="updateChargeInfo(chargeInfo.parkRecordId)">确认收费</el-button>
      <el-button @click="dialogVisible=false">取消</el-button>

      </div>
    </el-dialog>

  <!-- 操作日志详情数据列表 -->
  <el-card style="margin: 20px;">
    <el-table style="width: 100%" :data="carEntryAndExitArr">
      <el-table-column label="序号" type="index" width="200px" align="center"/>
      <el-table-column label="停车场名称" prop="parkingName" align="center"/>
      <el-table-column label="车牌号" prop="license" align="center"/>
      <el-table-column label="入场时间" prop="entranceTime" align="center"/>
      <el-table-column label="出场时间" prop="leaveTime" align="center"/>
      <el-table-column label="停车时间" prop="userTime" align="center"/>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
              v-if="!scope.row.leaveTime"
              link
              type="primary"
              @click="exit(scope.row.id)">
            出场
          </el-button>
          <el-button type="primary" @click="pay">支付</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<style scoped>

</style>